// 登陆页面
<template>
  <div class="login">
    <!-- <div class="title">一点点外卖订单管理系统</div> -->
    <div class="center-box">
      <h4>系统登陆</h4>
      <el-input placeholder="请输入账号" v-model="acc" clearable> </el-input>
      <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
      <p class="err">{{ errmsg }}</p>
      <el-button type="primary" @click="clcikLogin" style="width: 100%"
        >登陆</el-button
      >
    </div>
  </div>
</template>

<script>
import { login } from "../../api/apis"; //引入封装的接口
export default {
  data() {
    return {
      acc: "", //账号
      pwd: "", //密码
      errmsg: "", //登陆失败信息提示
    };
  },
  methods: {
    clcikLogin() {
      //调用封装的api函数;
      login(this.acc, this.pwd).then((res) => {
        if (res.data.code == 0) {
          this.errmsg = "";
          this.$message({
            message: res.data.role + "用户登陆成功",
            type: "success",
          });
          // this.$router 整个最大的路由对象
          // this.
          this.$router.push("/main/index"); //跳转到首页
          localStorage.token = res.data.token; //写入token
          localStorage.acc = this.acc; //写入用户名
          localStorage.id = res.data.id; //获取用户id
          localStorage.role = res.data.role; //写入用户权限
        } else {
          this.errmsg = res.data.msg;
        }
      });
    },
  },
};
</script>


<style lang="less">
@baseBgColor: #304156;

.login {
  height: 100%;
  background-color: @baseBgColor;
  display: flex;
  justify-content: center;
  align-items: center;
  .center-box {
    width: 400px;
    height: 200px;
    h4 {
      text-align: center;
      color: white;
      margin-bottom: 40px;
    }
    .el-input {
      margin-bottom: 20px;
    }
    .err {
      color: red;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}
</style>
